import React from 'react'
import { View } from '@tarojs/components'
import { useState } from 'react'
import { Popover } from 'antd-mobile'
import './index.scss'

type PropsType = {
  dataList: Array<{ key: string; text: string; icon: null }>
  onChange: (node: { key: string; text: string; icon: null }) => void
}

function App(props: PropsType) {
  const { dataList = [], onChange } = props
  const [selectedNote, setSelectedNote] = useState(dataList[0])

  return (
    <Popover.Menu
      actions={dataList}
      placement='bottom-start'
      onAction={(node: any) => {
        setSelectedNote(node)
        onChange && onChange(node)
      }}
      className={'drop'}
      trigger='click'
    >
      <View className={'drop-wrapper'}>
        <View className={'text'}>{selectedNote?.text}</View>
        <View className={'icon'}></View>
      </View>
    </Popover.Menu>
  )
}
export default App
